<template>
    <div class="item" v-if="user">
        <div class="head"><a href="#"><img :src="user.avatarUrl"></a></div>
        <div class="content">
            <div class="header">
                <div class="user">
                    <div class="name">
                        <a href="#" class="username">{{user.nickname}}</a>
                    </div>
                    <div class="time">
                        {{changeTime()}}
                    </div>
                </div>
                <div class="like">{{likedCount}}<i><good class="zan"></good></i></div>
            </div>
            <div class="answer">
                <span v-if="beReplied[0]">回复<a href="#">@{{beReplied[0].user.nickname}}：</a></span>
                <span>{{content}}</span>
            </div>
            <div class="replied" v-if="beReplied[0]">@{{beReplied[0].user.nickname}}：{{beReplied[0].content}}</div>
        </div>

    </div>    
</template>
<script>
import good from '@/svg/dianzan.svg'
export default {
    components:{
        good
    },
    props:{
        user:Object,
        content:String,
        likedCount:Number,
        beReplied:Array,
        time:Number

        
    },
    methods:{
        changeTime(){
            var tt=new Date(this.time);
           
            return ((tt.getFullYear()+"年"+tt.getMonth()+1)+"月"+tt.getDate()+"日");
        }
    }
        
        
    
   
}
</script>
<style lang="scss" scoped>
.item{
    padding-top: 10px;
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    .head{
        height: 35px;
        img{
            display: block;
            border-radius: 50%;
            width: 30px;
            height: 30px;
        }
    }
    .content{
        padding-right: 10px;
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding-bottom: 11px;
        padding-left: 10px;
        -webkit-flex: auto;
        -webkit-box-flex: 1;
        color: #333;
        flex: auto;
        .header{
            display: -webkit-flex;
            display: -webkit-box;
            display: flex;
            -webkit-flex-direction: row;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            flex-direction: row;
            .user{
                -webkit-box-flex: 1;
                flex: auto;
                width: 0;
                .name{
                    max-width: 100%;
                    display: -webkit-inline-box;
                    display: -webkit-inline-flex;
                    display: inline-flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    .username{
                        color:#666;
                    }
                }
                .time{
                    font-size: 9px;
                    color: #999;
                }
            }
            .like{
                display: inline-block;
                min-width: 30px;
                padding-left: 5px;
                font-size: 11px;
                
                i{
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin-left: 6px;
                    line-height: 0;
                    vertical-align: middle;
                    cursor: pointer;
                    .zan{
                        width: 100%;
                        height: 100%;
                        display: inline-block;
                        vertical-align: middle;
                        background-position: 0 0;
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }
                
            }
        }
        .answer{
            
            font-size: 15px;
            line-height: 22px;
            margin-top: 5px;
        }
        .replied{
            margin: 5px 0;
            padding: 10px;
            color: #888;
            font-size: 14px;
            line-height: 21px;
            position: relative;
        }
        .replied:after{
            position: absolute;
            z-index: 2;
            content: "";
            top: 0;
            left: 0;
            pointer-events: none;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            -webkit-transform-origin: top left;
            transform-origin: top left;
            border: 0 solid rgba(0,0,0,.1);
            border-width: 1px;
        }
    }
    }
</style>
